<template>
  <div class="clearfix login">
    <div class="left pr">
      <router-link to="/login" class="logo_login"></router-link>
      <div class="content_login">
        <div class="top clearfix">
          <span><router-link to="/register" class="emile_reg "
              >手机注册</router-link
            ></span> /
          <span
            ><router-link to="/emilaregsiter" class="emile_reg active"
              >邮箱注册</router-link
            ></span
          >
            <span><router-link to="/login" class="zhmmdl"
              >已有账号去登录></router-link
            ></span>
        </div>
        <div class="text">验证即登录，未注册将自动创建帐号</div>
        <div class="bot">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <div class="input_select input clearfix pr">

              <el-form-item class="w80" prop="email">
                <el-input
                  v-model="ruleForm.email"
                  placeholder="邮箱账号"
                  class="sjh_padding sjh_sjh"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input pr clearfix yzm_form">
              <el-form-item class="w70" prop="yzmnum">
                <el-input
                  v-model="ruleForm.yzmnum"
                  placeholder="验证码"
                  class="yzm_padding zitidx"
                ></el-input>
              </el-form-item>
              <el-button class="yzm padding_yam_0 pr">
                <span v-if="sendMsgDisabled">{{ time + "秒后获取" }}</span>
                <span v-if="!sendMsgDisabled" @click="sendMsg()"
                  >获取验证码</span
                >
              </el-button>
            </div>
            <div class="input pr">
              <el-form-item prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  class="zitidx"
                  placeholder="登录密码 6-16位数字+字母"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input pr">
              <el-form-item prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                  class="zitidx"
                  placeholder="登录密码 6-16位数字+字母"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input pr">
              <el-form-item prop="city">
                <vCity ref="getConCity" :setCity="ruleForm.city"  :key="ruleForm.city"></vCity>
              </el-form-item>
            </div>
            <el-button type="primary" class="button" @click="submitForm"
              >提交</el-button
            >
          </el-form>
          <div class="clearfix forgot ta">
            <div class="">
              注册即表示同意<span
                ><router-link to="/yhzcxy" class="zhmmdl"
                  >《用户协议》</router-link
                ></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="img"></div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import vCity from "../../components/City.vue";

export default {
  components: {
    vCity,
  },
  data() {
    return {
      ruleForm: [],
      rules: {
        email: [
          { required: true, message: "请输入您的邮箱账号", trigger: "blur" },
          { type: 'email',min: 3,  message: "请输入正确的邮箱号", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "请输入6-16位,格式为数字+字母",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "请输入6-16位,格式为数字+字母",
            trigger: "blur",
          },
        ],
        yzmnum: [
          { required: true, message: "请输入您的验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请检查您的验证码是否正确",
            trigger: "blur",
          },
        ],
      },
      options: regionData,
      selectedOptions: [],
      time: 60, // 发送验证码倒计时
      sendMsgDisabled: false,
    };
  },
  methods: {
    handleChange(value) {
      //console.log(value);
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      ////console.log(provinceCode)
      ////console.log(cityCode)
      ////console.log(orgion)
      this.ruleForm.city = [value[0], value[1], value[2]];
      this.ruleForm.city_text = provinceCode + "/" + cityCode + "/" + orgion;
    },
    submitForm() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm.pass);
            var passwordreg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
            if (!passwordreg.test(this.ruleForm.pass)) {
              //console.log(1223);
              this.$message.error("密码必须由数字、字母组合,请输入6-16位");
              return false;
            }
            if (this.ruleForm.pass !== this.ruleForm.checkPass) {
              this.$message.error("两次输入密码不一致!");
              return false;
            }

            if (!passwordreg.test(this.ruleForm.checkPass)) {
              this.$message.error("密码必须由数字、字母组合,请输入6-16位");
              return false;
            }

            //定义一个json示例
            //console.log(333);
            var jsons = {
              mobile: "",
              email: this.ruleForm.email,
              code: this.ruleForm.yzmnum,
              password: this.ruleForm.checkPass,
              city: this.$refs["getConCity"].city,
            };

            var that = this;
            //在需要的事件中直接使用
            this.$axios
              .post(this.$api + "/api/user/register", jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  //console.log(res.data.data);
                  // 登录成功
                  that.$message({
                    message: "注册成功",
                    type: "success",
                  });
                  // 缓存token
                  window.localStorage.setItem(
                    "token",
                    res.data.data.userinfo.token
                  );
                  window.localStorage.setItem(
                    "userid",
                    res.data.data.userinfo.user_id
                  );

                  // 跳转主页面
                  that.$router.push("/");
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
              });

            //window.open("/#/index", "_self");
          } else {
            //console.log("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendMsg() {
      this.$nextTick(() => {
        var that = this;
        if (!this.ruleForm.email) {
          this.$message.error("请输入您的邮箱");
          return;
        }

        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if (!reg.test(this.ruleForm.email)) {
          this.$message.error("请输入正确的邮箱");
          return;
        }

        that.sendMsgDisabled = true;

        let interval = window.setInterval(function () {
          if (that.time-- <= 0) {
            that.time = 60;
            that.sendMsgDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);

        var jsons = {
          email: this.ruleForm.email,
          event: "register",
        };

        this.$axios
          .post(this.$api + "/api/ems/send", jsons)
          .then((res) => {
            //console.log(res.data);
            if (res.data.code == 1) {
              //that.time = 60;
              //that.sendMsgDisabled = false;
              //window.clearInterval(interval);
              that.$message.success("发送成功");
            } else {
              that.$message.error(res.data.msg);
              that.time = 60;
              that.sendMsgDisabled = false;
              window.clearInterval(interval);
            }
          })
          .catch((Error) => {
            //console.log(Error);
          });
      });
    },
  },
};
</script>
 <style  >
.zhmmdl ,.emile_reg:hover,.emile_reg.active{
  color: #4285f4 !important;
}
.emile_reg {
  color: #000;
}
.yzm_padding .el-input__suffix {
  right: 35%;
}
</style>
<style>
.zitidx input {
  font-size: 0.75rem;
}
</style>
<style scoped>
.yzm_padding,
.zitidx {
  font-size: 0.75rem;
}
.sjh_padding input {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.input_select select {
  border-left: none !important;
}
.sjh_padding input:focus {
  border-color: #f56c6c !important;
}
.yzm {
  font-weight: normal;
}
.w80 {
  margin-bottom: 0;
}
.w80 input {
  border-radius: 5px;
  line-height: 40px;
  height: 42px;
  padding-left: 26%;
}
.w70 {
  margin-bottom: 0;
}
.w70 input {
  border-radius: 5px;
  line-height: 40px;
  height: 42px;
}
.el-input__inner {
  font-size: 0.75rem;
}

.input_select select {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  z-index: 99;
  border: none !important;
  background: transparent;
}
.yzm {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  border: none !important;
  background: transparent;
}
.yzm_form input {
  padding-right: 35%;
}
.yzm_form .el-input__suffix {
  right: 35%;
}
/* #c2c7ce */
input {
  color: #525252 !important;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
  border-left: none;
}
.text {
  font-size: 0.875rem;
  line-height: 1.875rem;
  color: #484949;
  margin-bottom: 0.625rem;
}
.login {
  width: 100vw;
  height: 100vh;
}
.login .left {
  width: 50%;
  float: left;
  padding: 3.125rem 3.75rem;
  height: 100vh;
}
.login .right {
  width: 50%;
  float: right;
}
.input {
  margin-bottom: 1.25rem;
}
.login .right .img {
  background: url(../../img/60.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.login .left .logo_login {
  background: url(../../img/logp.svg) no-repeat;
  width: 140px;
  height: 52px;
  display: block;
}
.content_login .top {
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #000000;
}
.content_login .top span:last-child {
  font-size: 14px;
  color: #5677fc;
  float: right;
}
.content_login .top span:first-child {
  float: left;
}
.content_login {
  width: 18.75rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input,
.el-input__inner {
  border: 1px solid #e3e5eb !important;
  font-size: 0.75rem !important;
}
.input_select input {
  width: 80%;
  display: block;
  float: right;
  border-left: none;
  border-radius: 0 5px 5px 0;
  position: relative;
}
.padding_yam_0.yzm {
  padding: 0;
}
.input_select select {
  width: 20%;
  display: block;
  float: left;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
  line-height: 2.5rem;
  height: 2.65rem;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  border-right: none;
  padding-left: 5px;
  border-radius: 5px 0 0 5px;
  background: transparent;
  z-index: 2;
}
.input_select {
  position: relative;
}

input {
  border: 1px solid #c2cfe0;
  line-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 5px;

  width: 100%;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
}
button {
  width: 100%;
  line-height: 2.5rem;
  background: #5677fc;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid #5677fc;
  border-radius: 5px;
}
button:hover {
  background: #fff;
  color: #5677fc;
}
.forgot {
  font-size: 0.875rem;
  line-height: 3.75rem;
  color: #5677fc;
  cursor: pointer;
}
.forgot {
  color: #686868;
}
.forgot span {
  color: #5677fc;
}
.other_login > div:nth-child(1) span {
  position: relative;
  background: #fff;
  position: relative;
  z-index: 10;
}
.other_login > div:nth-child(1) {
  background: #fff;
  text-align: center;

  font-size: 0.875rem;
  line-height: 2.5rem;
  color: #686868;
  position: relative;
  text-align: center;
}
.other_login > div:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #c2cfe0;
  left: 0;
  z-index: 9;
}
.wechat div {
  width: 2rem;
  height: 2rem;

  border-radius: 50%;
  line-height: 2rem;
  margin: 0 auto;
  border: 1px solid #c2cfe0;
}
.yzm {
  display: inline-block;
  width: 30%;
  font-size: 0.75rem;
  text-align: center;
  color: #545556;
  cursor: pointer;
  line-height: 40px;
  height: 42px;
  border: 1px solid #dcdfe6;
  border-left: none !important;
  border-radius: 0 5px 5px 0 !important;
}
.yzm::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: 60%;
  background: #c0c4cc;
  width: 1px;
}
.button {
  width: 100%;
  line-height: 2.5rem;
  background: #5677fc;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid #5677fc;
  border-radius: 5px;
  display: block;
  text-align: center;
  padding: 0;
}
.button:hover {
  background: #fff !important;
  color: #5677fc;
}
.yzm:hover {
  background: transparent !important;
}
</style>
<style>
.sjh_padding input {
  height: 42px;
  border: none;
  border: none;
  line-height: 2.5rem;
  padding: 0 1rem ;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
  color: rgba(84, 85, 86, 0.8);
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid #c2cfe0;
  border-radius: 5px;
}
.sjh_sjh .el-input__suffix {
  right: 5px !important;
}
@media (max-width: 990px) {
  .login .right,
  .login .left {
    width: 100% !important;
  }
  .login .left {
    background: #f5f5f5;
  }
  .login .right {
    display: none;
  }
}
@media (max-width: 500px) {
  .login .left {
    padding: 20px !important;
  }
  .content_login {
    width: 80% !important;
  }
}
</style>
